<style>
	* {
		margin: 0;
		padding: 0;
	}
	a {
		text-decoration: none;
	}
	#topBtn{
		width: 50px;
		height: 50px;
		background-color: #222222;
		opacity: 0.7;
		position: fixed;
		right: 50px;
		top: 620px;
		text-align: center;
		line-height: 50px;
		cursor:pointer;
		display: none;
	}
	#topBtn a{
		color: #FFFFFF;
		font-size: 16px;
	}
	#topBtn:hover{
		background-color: #F8F8FA;
		border: 1px solid #9C9C9C;
	}
	#topBtn:hover a{
		color: #393939;
	}
</style>

<div id="topBtn">
	<a href="#">^</a>
</div>

<script src="js/jQuery.js" type="text/javascript" charset="utf-8"></script>
<script>
	$("#topBtn").click(function(){
		document.body.scrollTop = document.documentElement.scrollTop = 0;
	})
	$(window).scroll(function(){
		if ($(this).scrollTop() > 300){
			$("#topBtn").css({
				display:"block",
				transition: "0.5"
			})
		}else if($(this).scrollTop() < 300)
			$("#topBtn").css({
				display:"none",
				transition:"0.5"
			})
	})
</script>